<template>
	<view class="content">
		<view>
			<view class="grzx-top">
				<view class="grzx-top-avatar"><image src="../../static/logo.png" /></view>
				<view class="grzx-top-info">
					<view>用户账号：{{ userInfo.number }}</view>
					<view>用户等级：{{ userInfo.type }}</view>
				</view>
			</view>
			<view class="sumItem-list">
				<view class="sumItem-wrap" @tap="billDetails(1)">
					<view class="sumItem">
						<view class="sum">{{userInfo.kprice || 0}}</view>
						<text class="uni-grid-9-text">BHT钱包</text>
					</view>
				</view>
				<view class="sumItem-wrap" @tap="billDetails(2)">
					<view class="sumItem">
						<view class="sum">{{userInfo.krprice || 0}}</view>
						<text class="uni-grid-9-text">BHT资产</text>
					</view>
				</view>
				<view class="sumItem-wrap" @tap="billDetails(0)">
					<view class="sumItem" >
						<view class="sum">{{userInfo.price || 0}}</view>
						<text class="uni-grid-9-text">可售资产</text>
					</view>
				</view>
				<view class="sumItem-wrap" @tap="billDetails(3)">
					<view class="sumItem">
						<view class="sum">{{userInfo.rprice || 0}}</view>
						<text class="uni-grid-9-text">可售额度</text>
					</view>
				</view>
			</view>
	
			<view class="cell-wrap">
				<view class="uni-grid-9">
					<block v-for="(key, index) in userItem1" :key="index">
						<view class="uni-grid-9-item" hover-class="uni-grid-9-item-hover" @click="goCellPage(key)" :class="(index + 1) % 4 === 0 ? 'no-border-right' : ''">
							<view class="item-img-wrap">
								<view class="uni-grid-9-item-img"><image :src="key.icon" mode="aspectFit"></image></view>
							</view>
							<text class="uni-grid-9-text">{{ key.name }}</text>
						</view>
					</block>
				</view>
			</view>
		</view>
		<view class="grzx-btn"><button class="base-btn" @tap="logout">退 出 登 录</button></view>
	</view>
</template>

<script>
import { update } from '../../common/utils/update.js';
import { mapActions, mapGetters } from 'vuex';
export default {
	data() {
		return {
			mynums: 0,
			userItem1: [
				{
					name: '财务明细',
					icon: '/static/user/125.png',
					url: '/pages/user/billDetails/index?id=0',
					bg: '#129eff'
				},
				{
					name: '我要签到',
					icon: '/static/user/122.png',
					url: '/pages/user/info/index',
					bg: '#129eff',
					fun: 'getSign'
				},
				{
					name: '总收益',
					icon: '/static/user/115.png',
					url: '/pages/user/sell-mod/sell5',
					bg: '#129eff'
				},
				{
					name: '合约资产',
					icon: '/static/user/123.png',
					url: '/pages/user/contract/index',
					bg: '#129eff'
				},
				{
					name: '消费明细',
					icon: '/static/user/125.png',
					url: '',
					bg: '#129eff'
				},
				{
					name: '有效合约',
					icon: '/static/user/116.png',
					url: '/pages/user/sell-mod/sell6',
					bg: '#129eff'
				},
				{
					name: '累计奖金',
					icon: '/static/user/114.png',
					url: '/pages/user/sell-mod/sell4',
					bg: '#129eff'
				},
				{
					name: '实名认证',
					icon: '/static/user/126.png',
					url: '/pages/user/realName/index',
					bg: '#129eff',
					value: ''
				},
				{
					name: '系统公告',
					icon: '/static/user/129.png',
					url: '/pages/user/notice/index',
					bg: '#129eff'
				},
				{
					name: '账户解封',
					icon: '/static/user/124.png',
					url: '/pages/user/unban/index',
					bg: '#129eff'
				},
				{
					name: '累计产量',
					icon: '/static/user/113.png',
					url: '/pages/user/sell-mod/sell3',
					bg: '#129eff'
				},
				{
					name: '个人资料',
					icon: '/static/user/127.png',
					url: '/pages/user/info/index',
					bg: '#129eff'
				},
				{
					name: '我的购物车',
					icon: '/static/user/132.png',
					url: '',
					bg: '#129eff'
				},
				{
					name: '意见反馈',
					icon: '/static/user/131.png',
					url: '/pages/user/feedback',
					bg: '#129eff'
				},
				{
					name: '抽奖',
					icon: '/static/user/111.png',
					url: '',
					bg: '#129eff'
				},
				{
					name: '我的团队',
					icon: '/static/user/119.png',
					url: '/pages/user/team/index',
					bg: '#129eff'
				},
				{
					name: '活动奖励',
					icon: '/static/user/128.png',
					url: '/pages/user/activity/index',
					bg: '#129eff'
				},
// 				{
// 					name: '游戏',
// 					icon: '/static/user/112.png',
// 					url: '',
// 					bg: '#129eff'
// 				},
				{
					name: '邀请好友',
					icon: '/static/user/110.png',
					url: '/pages/user/invite/index',
					bg: '#129eff'
				},
				{
					name: '检查更新',
					icon: '/static/user/update.png',
					url: '',
					bg: '#129eff',
					fun: 'update'
				}
			]
		};
	},
	computed: {
		...mapGetters({
			userInfo: 'getUserInfo'
		}),
		totalRrice() {
			return parseFloat(this.userInfo.cprice + this.userInfo.dprice).toFixed(2);
		}
	},
	onLoad() {},
	onShow() {
		uni.showLoading({ title: '' });
		this.getUserInfo();
	},
	methods: {
		...mapActions(['setUserInfo']),
		getUserInfo() {
			this.$http.getUserInfo().then(res => {
				const data = res.data;
				if (data.success) {
					data.data.member.mynums = data.data.mynums;
					this.mynums = data.data.mynums;
					this.setUserInfo(data.data.member).then(e => {
						uni.hideLoading();
						uni.stopPullDownRefresh()
					});
					return;
				}
				uni.showToast({
					title: data.errMsg,
					icon: 'none'
				});
			});
		},
		logout() {
			uni.showModal({
				title: '提示',
				content: `确定退出登录？`,
				success: res => {
					if (res.confirm) {
						this.$http.logout().then(res => {
							const data = res.data;
							if (data.success) {
								try {
									uni.setStorageSync('bht_userInfo', {});
								} catch (e) {
									// error
								}
								uni.showToast({
									title: '登出成功',
									icon: 'none'
								});
								setTimeout(() => {
									uni.reLaunch({
										url: '/pages/user/login/index'
									});
								}, 500);
								return;
							}
							uni.showToast({
								title: data.errMsg,
								icon: 'none'
							});
						});
					}
				}
			});
		},
		getSign() {
			uni.showLoading({
				title: ''
			});
			this.$http.getSign().then(res => {
				const data = res.data
				uni.hideLoading()
				if (data.success) {
					uni.showModal({
						title: '签到成功',
						content: `获得${data.data}个BHT奖励!`,
						showCancel: false,
						success: (res) => {
							if (res.confirm) {
								this.userInfo.kprice = parseFloat(this.userInfo.kprice + data.data).toFixed(2)
							}
						}
					})
					return
				}
				uni.showToast({
					title: data.errMsg,
					icon: 'none'
				});
			});
		},
		goPage(url) {
			if (!url) {
				uni.showToast({
					title: '功能开发中',
					icon: 'none'
				});
				return;
			}
			uni.navigateTo({
				url: url
			});
		},
		goCellPage(type) {
			switch (type.fun) {
				case 'getSign':
					this.getSign();
					break;
				case 'update':
					uni.showLoading({
						title: '正在检查更新'
					});
					//#ifdef APP-PLUS
					plus.runtime.getProperty(plus.runtime.appid, wgtinfo => {
						update(wgtinfo.version, 'click');
					});
					//#endif
					break;
				case 2:
					break;
				default:
					this.goPage(type.url);
			}
		},
		billDetails (id) {
			uni.navigateTo({
				url: '/pages/user/billDetails/index?id='+id
			});
		}
	},
	onPullDownRefresh() {
		this.getUserInfo()
	}
};
</script>

<style scoped lang="scss">
$color: #7e7e7e;
.cell-wrap {
	padding: 30upx 20upx 50upx 20upx;
	background-color: #fff;
	.items {
		margin-bottom: 10upx;
		.iconfont {
			font-size: 36upx;
			margin-right: 10upx;
		}
	}
}
.money-list {
	margin-bottom: 20upx;
	text-align: center;
	background-color: #fff;
	box-shadow:0 5rpx 15rpx 0 rgba(0, 0, 0, 0.1);
	.uni-grid-9-item {
		overflow: hidden;
	}
	.sum {
		width: 100%;
		line-height: 1.2;
		font-size: 32upx;
		font-weight: 500;
		color: #3e527e;
		word-wrap:break-word;
	}
	
}
.invite {
	position: absolute;
	right: 40upx;
	top: 10upx;
	z-index: 2;
	line-height: 1;
	font-size: 80upx;
}
.grzx-top {
	position: relative;
	background: #ffffff;
	box-shadow: 0 5px 20px 0 rgba(11,84,151,0.15);
	display: flex;
	align-items: center;
	padding: 30upx 20upx 30upx 20upx;
	border: 2upx solid #eee;
	&-avatar {
		width: 150upx;
		height: 150upx;
		margin-right: 30upx;
		border-radius: 280upx;
		overflow: hidden;
	}
	&-info {
		view {
			font-size: 32upx;
			font-weight: 500
		}
	}
}

.grzx-btn {
	padding: 40upx 60upx;
	text-align: center;
}

.sumItem-list {
	display: flex;
	justify-content: space-between;
	align-items: stretch;
	padding: 40upx 20upx;
}
.sumItem {
	padding: 10upx 5upx;
	color: #fff;
	text-align: center;
	&-wrap {
		width: 23%;
		background: #6492f7;
		box-shadow: 0 5px 15px 0 rgba(62,82,126,.5);
		border-radius: 8upx;
	}
	.sum {
		padding: 10upx 0;
		font-size: 30upx;
		line-height: 1.2;
		font-weight: 500;
		overflow: hidden;
		word-wrap: break-word;
	}
	.uni-grid-9-text {
		color: #ccdcff;
	}
}
.item-img-wrap {
	width: 90upx;
	height: 90upx;
	background: #FFFFFF;
	box-shadow: 0 2px 5px 0 rgba(0,0,0,0.15), inset 0 -1px 0 0 #bacfff;
	border-radius: 10upx;
}
.uni-grid-9-item-img {
	padding: 20upx;
	width: 50upx;
	height: 50upx;
}
.uni-grid-9 {
	background: #fff;
	width: 716upx;
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	border: 2upx solid #eee;
	border-bottom: 0;
}
.uni-grid-9-item {
	width: 179upx;
	height: 180upx;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	border-bottom: 2upx solid;
	border-right: 2upx solid;
	border-color: #eee;
	box-sizing: border-box;
}
.no-border-right {
	border-right: none;
}
.uni-grid-9-icon {
	font-size: 50upx;
}
.uni-grid-9-text {
	width: 179upx;
	margin-top: 20upx;
	text-align: center;
	color: #333;
	font-size: 500
}

.uni-grid-9-item-hover {
	background: rgba(0, 0, 0, 0.05);
}
.unl-item-hover {
	background: rgba(0, 0, 0, 0.05);
}
</style>
